<template>
  <div>
    <input ref="inputRef" v-model="obj.name" />
    <el-input ref="elInputRef" v-model="obj.age"></el-input>
    <br />
    <child-ref ref="childTestRef"></child-ref>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, nextTick, ref } from 'vue'
import childRef from './child-ref.vue'

const obj = reactive({
  name: 'hello',
  age: '20'
})
onMounted(() => {
  obj.name = 'hello world'
  obj.age = '30'
  const proxy = getCurrentInstance()
  console.log(proxy?.proxy?.$refs.childTestRef.value)
  const childTestRef = ref()
  console.log(childTestRef)
  console.log(proxy.proxy.$refs.inputRef.value)
  const elInputRef = proxy.proxy.$refs.elInputRef.ref
  console.log(typeof elInputRef)
  console.log(Object.prototype.toString.call(elInputRef))
  console.log(elInputRef.value)
  nextTick(() => {
    console.log(proxy.proxy.$refs.inputRef.value)
    console.log(elInputRef.value)
  })
})
</script>
<style lang="scss" scoped></style>
